Nessa aula, discutimos um aspecto crucial do nosso design system: o espaçamento, também conhecido como spacing. Abordamos a importância de definir a distância e o relacionamento entre os elementos de um design para criar uma interface coesa e esteticamente agradável.

Pontos importantes que destacamos na aula incluem:

• Conceito de Spacing: Refere-se aos espaços que determinam a relação de distância entre os elementos de um design.
• Grids Comuns: A maioria dos Design Systems utiliza grids baseados em incrementos de 4 ou 8 pixels para definir o espaçamento.
• Tipos de Espaçamento: Definimos dois tipos principais - valores unitários para tokens primitivos, que são referências básicas, e espaçamentos semânticos, como o GAP, que dão propósito e contexto ao uso do espaço entre elementos.
• Nomenclatura e Escala: É crucial definir uma nomenclatura clara para os espaçamentos e escolher uma base (como 16, 8 ou 4 pixels) para construir uma escala flexível que atenda às necessidades do produto e facilite a comunicação com os desenvolvedores.
• Uso de T-shirt Sizes: Discutimos a possibilidade de usar tamanhos como XS, S, M, L, XL, etc., para definir espaçamentos, o que será explorado mais adiante no curso.
• Ferramentas e Visualização: Apresentamos o site https://proportio.app/, que ajuda a visualizar diferentes proporções de espaçamento, tipografia e iconografia, e como eles se relacionam entre si.
• Aplicação Prática no Figma: Demonstramos como definir os valores de espaçamento no Figma, que servirão de referência para a criação de componentes e layouts futuros.
• Hierarquia e Harmonia: Enfatizamos a importância de uma estrutura hierárquica e harmônica no design, que pode ser alcançada através de um sistema de espaçamento bem definido.
• Decisões de Design Consistentes: Com espaçamentos padronizados, podemos garantir consistência no design, como por exemplo o espaçamento de 12 pixels entre um ícone e um texto dentro de um botão.

Essa aula passa uma compreensão clara de como definir e aplicar espaçamentos em um design system, permitindo criar designs mais estruturados e consistentes. A aplicação no Figma é um fator essencial para visualizar os conceitos discutidos nessa aula.